<script lang="ts" setup>
import { onMounted, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { VbenIcon } from '@vben/icons';

import { Select, SelectOption } from 'ant-design-vue';

import TagSelectModal from './tag-select-modal.vue';

withDefaults(defineProps<Props>(), {
  tagType: undefined, // 1企业标签 2人员标签
});

const emit = defineEmits(['blur', 'change']);

interface Props {
  tagType?: number | string;
}

const modelValue = defineModel<[(number | string)[], string]>({
  default: () => [[], ''],
});

const filterOp = ref<number | string>();
const confirmedOptions = ref<any[]>([]);

const [BasicModal, modalApi] = useVbenModal({
  connectedComponent: TagSelectModal,
  // onClosed: handleClosed,
  // onConfirm: handleConfirm,
  // onOpenChange: async (isOpen) => {
  //   if (!isOpen) {
  //     return null;
  //   }
  //   modalApi.modalLoading(true);
  //   modalApi.modalLoading(false);
  // },
});

// 筛选后确认
async function handleConfirm(data: any) {
  console.log('handleConfirm', data);
  modelValue.value[0] = data.ids;
  modelValue.value[1] = data.op;
  filterOp.value = data.op;
  confirmedOptions.value = data.options;
}

// async function handleClosed() {
// resetInitialized();
// }

function onChange(value: any, selectedOption: any) {
  console.log(value, selectedOption);
  confirmedOptions.value = confirmedOptions.value.filter((item) =>
    value.includes(item.value),
  );
  emit('change', modelValue.value);
}

// 点击标签搜索下拉框时触发，打开弹窗
function dropdownVisibleChange() {
  modalApi.setData({
    ids: modelValue.value[0] || [],
    confirmedOptions: confirmedOptions.value,
    op: modelValue.value[1] || '',
  });
  modalApi.open();
}

onMounted(async () => {
  console.log('onMOunted');
});
</script>
<template>
  <div class="flex w-full gap-1">
    <Select
      v-model:value="modelValue[0]"
      class="w-full"
      mode="multiple"
      placeholder="请选择"
      allow-clear
      :show-search="false"
      :show-arrow="false"
      :max-tag-count="1"
      :max-tag-text-length="5"
      max-tag-placeholder=""
      :open="false"
      @blur="emit('blur')"
      @change="onChange"
      @dropdown-visible-change="dropdownVisibleChange"
    >
      <template #maxTagPlaceholder="omittedValues">
        <span>+{{ omittedValues.length }}</span>
      </template>
      <SelectOption v-for="item in confirmedOptions" :key="item.value">
        <div class="flex items-center">
          <VbenIcon
            v-if="filterOp === '1'"
            icon="tabler:logic-or"
            class="inline-block"
          />
          <VbenIcon
            v-if="filterOp === '2'"
            icon="tabler:logic-and"
            class="inline-block"
          />
          <VbenIcon
            v-if="filterOp === '3'"
            icon="tabler:logic-xor"
            class="inline-block"
          />
          <span>{{ item.label }}</span>
        </div>
      </SelectOption>
    </Select>

    <BasicModal :tag-type="tagType" @confirm="handleConfirm" :show-op="true" />
  </div>
</template>
